<template>
 <div id="listbox" class="el-transfer-panel">
  <p class="el-transfer-panel__header">
    <label class="el-checkbox">
      <span class="el-checkbox__label">
        {{title}}
        <span>{{getChoosed.length}} / {{list.length}}</span>
      </span>
    </label>
  </p>
  <div v-loading="loadList" class="el-transfer-panel__body">
    <div class="el-transfer-panel__filter el-input el-input--small el-input--prefix">
      <input type="text" autocomplete="off" placeholder="请输入表名" v-model="serch" class="el-input__inner">
      <span class="el-input__prefix"><i class="el-input__icon el-icon-search"></i></span>
    </div>
    <div ref="group" v-if="!unmatch && cplist.length > 0" role="group" aria-label="checkbox-group" class="el-checkbox-group el-transfer-panel__list is-filterable" @scroll="load">
      <label ref="label" role="checkbox" @contextmenu="fresh" v-for="(v, k) in cplist" :key="k" class="el-checkbox el-transfer-panel__item" aria-checked="true">
        <span aria-checked="mixed" class="el-checkbox__input" :class="[disabled ? 'is-disabled': '']">
          <span class="el-checkbox__inner">
            <input :disabled="disabled" ref="checkbtn" @change="choose(k, $event)" type="checkbox" class="el-checkbox__original" :value="v.value" :data-value="v.business">
          </span>
        </span>
        <span class="el-checkbox__label el-label">
          <span>{{v.label}}</span>
          <i class="el-icon-zoom-in el-right" @click="disabled = false"></i>
        </span>
      </label>
    </div>
    <p v-if="unmatch" class="el-transfer-panel__empty">无匹配数据</p>
    <p v-if="!cplist.length && !unmatch" class="el-transfer-panel__empty">无数据</p>
  </div>
 </div>
</template>

<script>
/**
 * @author 'yejinbo'
 * @description `原本是一个级联的组件，好像已经没什么用了，功能也还没做完的...`
 */
export default {
  data () {
    return {
      disabled: true,
      serch: '',
      unmatch: false,
      loadList: false
    }
  },
  watch: {
    serch (nv) {
      if (!nv) this.unmatch = false
    },
    'cplist.length': function (len) {
      if (!len) {
        this.unmatch = true
        return
      }
      this.loadList = true
      this.updateChoose().then(() => {
        this.loadList = false
      })
    }
  },
  computed: {
    cplist () {
      if (!this.serch) {
        return this.list
      }
      let tmplist = this.list.filter(v => (v.label.toString().indexOf(this.serch) > -1))
      if (!tmplist) {
        return []
      }
      return tmplist
    }
  },
  methods: {
    choose (k, e) {
      if (this.disabled) return
      this.unmatch = false
      let f = e.target.parentNode
      let gf = f.parentNode
      const _v = e.target.value
      this.$nextTick(() => {
        if (e.target.checked) {
          f.className += ' is-checked'
          gf.className += ' is-checked'
          for (let v of this.getChoosed) {
            if (v.value === _v) return
          }
          for (let [i, v] of this.list.entries()) {
            if (v.value === _v) {
              this.list[i]['rank'] = i
              this.getChoosed.push(this.list[i])
            }
          }
        } else {
          for (let [i, v] of this.getChoosed.entries()) {
            if (v.value === _v) this.getChoosed.splice(i, 1)
          }
          f.className = f.className.replace(/is-checked/g, '').trim()
          gf.className = gf.className.replace(/is-checked/g, '').trim()
        }
      })
    },
    updateChoose () {
      for (let [k, v] of this.cplist.entries()) {
        for (let [ki, vi] of this.getChoosed.entries()) {
          if (vi.value === v.value) {
            this.$nextTick(() => {
              let choosedBtn = this.$refs.checkbtn[k]
              let f = choosedBtn.parentNode
              let gf = f.parentNode
              choosedBtn.checked = true
              f.className += ' is-checked'
              gf.className += ' is-checked'
            })
            break
          } else if (ki === (this.getChoosed.length - 1)) {
            this.$nextTick(() => {
              let choosedBtn = this.$refs.checkbtn[k]
              let f = choosedBtn.parentNode
              let gf = f.parentNode
              choosedBtn.checked = false
              f.className = f.className.replace(/is-checked/g, '').trim()
              gf.className = gf.className.replace(/is-checked/g, '').trim()
            })
            break
          }
        }
      }
      return Promise.resolve()
    },
    load (e) {
    },
    fresh (e) {
      e.returnValue = false
      let _pn = (node) => {
        if (node.nodeName === 'LABEL') {
          return node
        } else {
          return _pn(node.parentNode)
        }
      }
      // let _n = _pn(e.target)
      // if (!_n.className.match(/is-checked/g)) return
      // console.log('sasd')
      // this.$refs.label.forEach(v => {
      //   console.log(v === _n)
      // })
    }
  },
  mounted () {
    let group = this.$refs.group
    console.log('groupheight', group.getBoundingClientRect())
    console.log('ctnheight', getComputedStyle(document.getElementsByClassName('el-transfer-panel__item')[0]).height)
    console.log('scrollheight', group.scrollTop)
  },
  components: {},
  model: {
    prop: 'getChoosed',
    event: 'change'
  },
  props: {
    list: {
      type: Array
    },
    getChoosed: Array,
    title: {
      type: String
    }
  }
}
</script>

<style scoped lang="stylus">
.el-label
  display: flex !important
  justify-content: space-between
  padding-right 5px
  align-items: center
  .el-right
    cursor: pointer !important
    color: #0ac
    font-size: 16px
.el-transfer-panel__filter
  margin: 5px 15px
</style>
